@charset "UTF-8";

$namespace: "wo-" !default;
//主题颜色
$theme-color: #39c !default;
//页面字体设置
$font-family-default: 'Microsoft YaHei', STXihei, 'Helvetica Neue', Helvetica, sans-serif !default;
//页面整体背景颜色
$body-background-color: #fdf2e4 !default;
//默认边框色
$border-color: #e5e5e5 !default;

//region 响应式比例区块
@mixin responsive-box($percent: 100%) {
  position: relative;
  display: block;
  width: 100%;
  &::after {
    content: '';
    display: block;
    padding-top: $percent;
  }
  > * {
    position: absolute;
  }
}
//endregion

@function px2rem($size, $root: 16px) {
  @return $size / $root * 1rem;
}

@function unified-unit($value) {
  @return $value;
}

//1.默认图标为一个响应式正方形
//2.内部可包含字体图标或图片图标
//3.通过绝对定位方式将图标内容居中
//4.图标默认占据100%宽度，其他样式请在具体位置覆写
.#{$namespace}icon {
  @include responsive-box();
  overflow: hidden;
  > * {
    position: absolute;
  }
  &.#{$namespace}icon-font, .#{$namespace}icon-font {
    font-family: 'iconfont' !important;
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
    text-align: center;
  }
  &.#{$namespace}icon-image, .#{$namespace}icon-image {
    font-size: 0;
    line-height: 0;
    //1.如果类名加在包裹层上设置图片样式
    img {
      width: 100%;
      height: auto;
    }
  }
  .#{$namespace}icon-font, .#{$namespace}icon-image {
    left: 0;
    width: 100%;
    text-align: center;
  }
}
//endregion


//vue专用
[v-cloak] {
  display: none;
}

//region 通用面板
.wo-panel {
  position: relative;
  padding: unified-unit(10px);
  margin-bottom: unified-unit(10px);
  background-color: #fff;
  border-radius: unified-unit(5px);
  .wo-panel-head {
    height: unified-unit(25px);
    padding-bottom: unified-unit(4px);
    margin-bottom: unified-unit(10px);
    border-bottom: 1px solid $border-color;
    line-height: unified-unit(25px);
    font-size: unified-unit(16px);
    text-align: center;
  }
}
//endregion